<template>
    <div class="user">
        <user-search @query-click="handleQueryClick" @reset-click="handleResetClick"></user-search>
        <user-content ref="contentRef" @new-btn-click="handleNewBtnClick"
            @edit-btn-click="handleEditBtnClick"></user-content>
        <user-modal ref="modalref" />
    </div>
</template>
<script setup lang="ts">
import userSearch from './c-cpns/user-search.vue';
import userContent from './c-cpns/user-content.vue';
import UserModal from './c-cpns/user-modal.vue';
import { ref } from 'vue'

// 对content组件的操作
const contentRef = ref<InstanceType<typeof userContent>>()
function handleQueryClick(formData: any) {
    contentRef.value?.fetchUserListData(formData)
}
function handleResetClick() {
    contentRef.value?.fetchUserListData()
}
// 对modal组件的操作
const modalref = ref<InstanceType<typeof UserModal>>()
function handleNewBtnClick() {
    modalref.value?.setModalVisible()
}
function handleEditBtnClick(itemData: any) {
    modalref.value?.setModalVisible(false, itemData)
}
</script>
<style lang="less" scoped>
.user {
    border-radius: 8px;
    overflow: hidden;
}
</style>
